<template>
  <div class="putstore">
        <div class="top-add">
            <el-button size="mini" type="primary" @click="openSearch">查询入库单</el-button>
            <!-- <el-button size="mini" class="pull-right"  style="margin-right:50px" type="primary" @click="outputTable">导出</el-button> -->
            <el-button size="mini" class="pull-right" style="margin-right:50px" type="primary" @click="goAddPutOrder">新增入库</el-button>
            
        </div>
        <!-- 查询搜索框 -->
      <el-row v-if="is_search" :gutter="16" style="line-height:40px;margin-top:-20px;">
        <el-col :span="5">
          <div class="">
            <label for="">入库单号：</label>
            <el-input v-model="put_num" size="small" placeholder="请输入入库单号" style="width:80%"></el-input>
          </div>
        </el-col>
        <!-- <el-col :span="5">
          <div class="">
            <label for="">供应商名称：</label>
            <el-input v-model="supplier_name" size="small" placeholder="请输入供应商名称" style="width:80%"></el-input>
          </div> 
        </el-col> -->
        <el-col :span="8">
          <div class="">
            <label for="">选择日期：&nbsp;&nbsp;</label>
            <div>
              <el-date-picker
                size="small"
                v-model="select_date"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']" style="width:80%">
              </el-date-picker>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
            <label for="">装备名称：</label>
            <el-input v-model="prodName" size="small" placeholder="请输入装备名称" style="width:80%"></el-input>
        </el-col>

      </el-row>
      <el-row :gutter="10" v-if="is_search" style="margin-bottom:20px;margin-top:20px">
        <el-col :span="2">
          <el-button type="danger" size="mini" style="width:80px;margin-right:20px" @click="searchPutorder">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="danger" size="mini" style="width:80px" @click="clearSearch">清空</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table :data="putstorelist" border style="width: 100%" v-loading="putLoading">
            <!-- <el-table-column type="selection" width="50"></el-table-column> -->
            <el-table-column prop="orderNum" label="入库单号"></el-table-column>
            <el-table-column prop="typeName" label="入库类型"></el-table-column>
            <!-- <el-table-column prop="supplier_code" label="供应商编号" width="100"></el-table-column>
            <el-table-column prop="supplier_name" label="供应商名称" width="200"></el-table-column> -->
            <el-table-column prop="putPerson" label="制单人"></el-table-column>
            <el-table-column prop="putDate" label="入库日期"></el-table-column>
            <el-table-column prop="putStatus" label="状态">
              <template slot-scope="scope">
                <div>
                  <div v-if="scope.row.putStatus == 2">待入库</div>
                  <div v-if="scope.row.putStatus == 1">已入库</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="putRemark" label="备注"></el-table-column>
            <el-table-column label="操作" width="260">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-reading" @click="watchPutOrder(scope.row)">{{scope.row.putStatus == 2 ? '提交' : '查看'}}</el-button>
                <el-button size="mini" icon="el-icon-edit" v-if="scope.row.putStatus == 2" @click="editPutOrder(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-delete" v-if="scope.row.putStatus == 2" @click="delPutOrder(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total_num">
          </el-pagination>
        </el-col>
      </el-row>

  <putdetail :orderDetail="orderDetail" :openPutdetail.sync="openPutdetail"></putdetail>
  <excel style="display:none" :excelname="excelname" :outPutKey="outputKey" :tableData="putProdsInfo" :trueOutExecl.sync="trueOutExecl"></excel>
  </div>
</template>

<script>
import { GetPutOrder, GetPutOrderPage , DelPutOrder, FindPutOrderById, SearchPutStore } from '@/api/putstore';
import excel from '../test/excel';
import putdetail from '@/views/putstore/putdetail'
export default {
  name: 'putstore',
  components:{
    excel,
    putdetail
  },
  data() {
    return {
        putLoading: true,
        trueOutExecl: false,  // 确认是否导出
        outputKey: [], // 导出表格title
        excelname: '入库详情',
        is_search: false,
        put_num: '',
        supplier_name: '',
        select_date: ['',''],
        prodName: '',
        openPutdetail: false,
        orderDetail: {},
        putstorelist: [],
        putProdsInfo: [],  // 导出的装备详情
        // 分页
        pageNum: 1,
        pageSize: 8,
        total_num: null,
        isSearch: false,
    }
    
  },
  methods:{
    // 获取入库单信息
    getPutOrder() {
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      GetPutOrderPage(reqData).then( res => {
        let data = res.data.info;
        this.putstorelist = data.list;
        this.total_num = data.total;
        this.putstorelist.forEach( e => e.putDate = this.formatDate(e.putDate));
        this.putLoading = false;
      })
    },
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {
      this.putLoading = true;
      this.pageNum = val;
      if (this.isSearch) {
          this.searchPutorder()
      } else {
          this.getPutOrder()
      }
    },
    // 导出表格
    outputTable() {
      this.trueOutExecl = !this.trueOutExecl;
      this.outputKey = [{
            prodCode: "装备编号",
            prodName: "装备名称",
            prodNum: '数量',
            areaName: "库区",
            departmentCode: "库位",
            emit: "单位",
            prodBatch: '批次',
            prodDate: "到期时间",
            prodPrice: '价格',
            prodSpecial: "规格",
      }]
    },
    // 点击查询按钮打开下拉框
    openSearch() {
        this.is_search = !this.is_search;
    },
    clearSearch() {
        this.put_num = '';
        this.supplier_name = '';
        this.select_date = ["",""];
        this.prodName = '';
    },
    searchPutorder() {
      this.putLoading = true;
      if (this.select_date[0]) {
        this.select_date[0] = this.formatDate(this.select_date[0]);
        this.select_date[1] = this.formatDate(this.select_date[1]);
      }

      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        beginTime: this.select_date[0],
        endTime: this.select_date[1],
        orderNum: this.put_num,
        prodName: this.prodName,
      }
      SearchPutStore(reqData).then( res => {
        let data = res.data.info;
        this.putstorelist = data.list;
        this.total_num = data.total;
        this.putstorelist.forEach( e => e.putDate = this.formatDate(e.putDate));
        this.putLoading = false;
        this.isSearch = true;
      })
    },
    goAddPutOrder() {
        this.$router.push('/addPutOrder')
    },
    editPutOrder(data) {
      console.log(data)
        this.$router.push({
          path: '/addPutOrder',
          query: {
            putid: data.putId
          },
        })
    },
    delPutOrder(el) {
      this.confirm({
        fn: (id) => {
          this.putLoading = true;
           DelPutOrder(id).then( res => {
              let data = res.data
              this.$message({
                  message: data.msg,
                  type: 'success'
              })
              this.getPutOrder()
            })
        },
        id: el.putId,
        content: '此操作将删除当前信息, 是否继续?',
      });
    },
    // 查看入库单详情
    watchPutOrder(data) {
      this.openPutdetail = true;
      FindPutOrderById(data.putId).then( res => {
        this.orderDetail = res.data[0];
        this.orderDetail.putDate = this.formatDate(this.orderDetail.putDate);
      })
    }
  },
  
  watch: {
    openPutdetail(newVal) {
      if (!newVal) {
        this.putLoading = true;
        if (this.isSearch) {
          setTimeout(() => {
            this.searchPutorder()
          }, 1000)
        } else {
          setTimeout(() => {
            this.getPutOrder()
          }, 1000)
        }
      }
    }
  },

  mounted() {
    this.putLoading = true;
    this.getPutOrder();
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,100,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
</style>
  
